﻿@model CustomerAvatarModel
@using Grand.Web.Models.Customer;
@{
    Layout = "_ColumnsTwo";

    //title
    Html.AddTitleParts(T("PageTitle.Account").Text);
}
@section left
{
    @await Component.InvokeAsync("CustomerNavigation", new { selectedTabId = CustomerNavigationEnum.Avatar })
}
<form asp-route="CustomerAvatar" method="post" enctype="multipart/form-data">
    <div class="page account-page avatar-page pl-lg-3 pt-lg-0 pt-3">
        <a class="js-offcanvas-trigger blog-filter filter-button btn btn-outline-info d-lg-none d-flex mb-3" data-offcanvas-trigger="leftSide" href="#leftSide"><span class="mdi mdi-tune"></span><span class="ml-3">@T("Account.Navigation")</span></a>
        <h1 class="h2 generalTitle">@T("Account.Avatar")</h1>
        <div asp-validation-summary="ModelOnly" class="message-error"></div>
        <div class="fieldset">
            @if (!String.IsNullOrEmpty(Model.AvatarUrl))
            {
                <div class="image mb-3">
                    <img class="img-thumbnail" src="@(Model.AvatarUrl)" alt="avatar" />
                </div>
            }
            <label class="btn btn-info" for="my-file-selector">
                <input id="my-file-selector" name="uploadedFile" type="file" accept="image/*" style="display:none;" onchange="$('#upload-file-info').html($(this).val());">
                @T("admin.download.uploadfile")
            </label>
            <span class='label label-info' id="upload-file-info"></span>
        </div>
        <div class="col-12 pt-1 pb-1">
            <div class="info card card-outline-info mb-2 mt-2 text-center">
                <div class="card-body">
                    <blockquote class="card-bodyquote">
                        <span>@T("Account.Avatar.UploadRules")</span>
                    </blockquote>
                </div>
            </div>
        </div>
        <input type="submit" name="upload-avatar" class="btn btn-info upload-avatar-button" value="@T("Common.Upload")" />
        @if (!String.IsNullOrEmpty(Model.AvatarUrl))
        {
            <input type="submit" name="remove-avatar" class="btn btn-danger remove-avatar-button" value="@T("Account.Avatar.RemoveAvatar")" />
        }
    </div>
</form>
